<template>
  <div>
    <!-- 新建 -->
    <el-dialog
      title="新建"
      :visible.sync="addTemplateDialogVisible"
      width="1000px"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      @close="cancel"
      v-if="addTemplateDialogVisible"
    >
      <el-row style="margin-bottom: 15px">
        <el-col :span="24"> 所属目录： {{ treeName }} </el-col>
      </el-row>

      <div style="max-height: 65vh; overflow: auto">
        <div class="df_box">
          <div
            class="samll_box"
            v-for="item in diagnosisTypeTemplateList"
            :key="item.id"
          >
            <span> 模版名称： </span>
            <div class="right_box">
              <!-- <span> {{ item.dictLabel }} </span> -->
              <el-select
                v-model="item.dictLabel"
                placeholder="请选择"
                size="mini"
                style="width: 100%"
              >
                <el-option
                  v-for="item in [item.dictLabel]"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>

              <el-input
                v-model="item.templateExample"
                type="textarea"
                :rows="4"
                style="width: 100%; margin-top: 5px"
              ></el-input>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  sysUserSexerm_diagnosis_type_template_name,
  diagnosisTypetemplateAdd,
} from '@/api/allApi.js'
export default {
  name: 'EitcErmPcAddTemplateDialog',
  props: {
    listInId: {
      type: String,
      default: ''
    },
    treeName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      addTemplateDialogVisible: false,
      diagnosisTypeTemplateList: []
    }
  },

  mounted() {
    this.initSysUserSexerm_diagnosis_type_template_name()
  },

  methods: {
    async initSysUserSexerm_diagnosis_type_template_name() {
      const res = await sysUserSexerm_diagnosis_type_template_name()
      if (res.code !== 200) return this.$message.error(res.msg)
      this.diagnosisTypeTemplateList = res.data.filter((item) => {
        item.templateExample == ''
        return item
      })
    },
    cancel() {
      this.addTemplateDialogVisible = false
      this.initSysUserSexerm_diagnosis_type_template_name()
    },
    async submit() {
      this.diagnosisTypeTemplateList.forEach((item) => {
        return (item.templateName = item.dictValue)
      })
      let obj = {
        diagnosisTypeId: this.listInId,
        diagnosisTypeTemplateList: this.diagnosisTypeTemplateList.map(
          (item) => {
            return {
              templateName: item.dictValue,
              templateExample: item.templateExample || ""
            }
          }
        )
      }
      const res  = await diagnosisTypetemplateAdd(obj)
      if (res.code !== 200) return this.$message.error(res.msg)
      this.$message.success("新建成功!")
      this.$parent.initList()
      this.cancel()
      this.addTemplateDialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.df_box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-right: 10px;

  .samll_box {
    display: flex;
    width: 45%;
    margin-top: 15px;

    span {
      flex: 4;
    }

    .right_box {
      flex: 20;
    }
  }
}
</style>